import React, { useEffect, useState } from "react";
import styles from "./index.module.less";
import { Button, Layout, Menu } from "antd";
import { useNavigate, useLocation, Outlet } from "react-router-dom"
const { SubMenu, Item } = Menu;
const { Content, Header } = Layout;
const home = () => {
    const navigate = useNavigate()
    const [key, setKey] = useState('/home/index')
    const { pathname } = useLocation()
    const names = ['tone','jay','sony']
    const scores = [92,84,96];
    const map = new Map([[names[0],scores[0]]])
    map.clear()
    console.log(map);
    
    for(let i=0; i<names.length; i ++){
        map.set(names[i],scores[i])
    }
    console.log(map);
    console.log(map.get('tone'));
    useEffect(() => {   
        navigate(key)
    }, [key])

    return (
        <Layout className={styles.home}>
            <Header className={styles.home__header}>
                <Menu theme='light' mode="horizontal" onClick={({ key }) => setKey(key)} selectedKeys={[pathname]}>
                    <SubMenu key="/home/index" title={'首页'}>
                        <Item key="/home/index">首页</Item>
                        <Item key="/home/manage">管理</Item>
                    </SubMenu>
                    <Item key="/login">退出</Item>
                </Menu>
            </Header>
            <Content className={styles.home__content}>
                <Outlet />
            </Content>
        </Layout>
    );
};

export default home;
